$(document).ready(function () {
    var reservationsViewModel = new ReservationsViewModel();
    ko.applyBindings(reservationsViewModel);
});


// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}




// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
    var self = this;

    self.PassagerName = ko.observable("NewPassager");

    // Non-editable catalog data - would come from the server
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
        ];

    // Editable data
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
        ]);


    self.addSeat = function () {

        self.seats.push(new SeatReservation(self.PassagerName(), self.availableMeals[0]));
    };

    self.removeSeat = function (seat) { self.seats.remove(seat) }

}